<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="集群">
        <el-select v-model="searchParam.id" placeholder="请选择">
          <el-option
            v-for="item in kubes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="命名空间">
        <el-input v-model="searchParam.namespace" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
        <el-button :loading="downloadLoading" style="margin:0 0 20px 20px;" type="primary" icon="el-icon-document" @click="handleDownload">
          导出Excel
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="Deployment" sortable />
      <el-table-column prop="replicas" label="副本数" width="100" sortable />
      <el-table-column label="请求资源">
        <el-table-column prop="resources.requests.cpu" label="CPU" width="180" sortable />
        <el-table-column prop="resources.requests.memory" label="内存" width="180" sortable />
      </el-table-column>
      <el-table-column label="限制资源">
        <el-table-column prop="resources.limits.cpu" label="CPU" width="180" sortable />
        <el-table-column prop="resources.limits.memory" label="内存" width="180" sortable />
      </el-table-column>
      <el-table-column prop="java_opts" label="JVM" sortable />

    </el-table>

  </div>
</template>

<script>
import { getList, getDeployment } from '@/api/resource/kube'
export default {
  data() {
    return {
      downloadLoading: false,
      kubes: [],
      namespaces: ['cobra'],
      tableData: [],
      searchParam: {
        id: '',
        namespace: 'cobra'
      }
    }
  },
  created() {
    this.fetchKube()
  },
  methods: {
    fetchData() {
      this.fetchDeployment()
    },
    fetchKube() {
      getList().then(response => {
        this.kubes = response.data
      })
    },
    fetchDeployment() {
      if (this.searchParam.id && this.searchParam.namespace) {
        getDeployment(this.searchParam).then(response => {
          this.tableData = response.data
        })
      }
    },
    handleDownload() {
      this.downloadLoading = true
      const tHeader = ['Deployment', '副本数', '请求CPU', '请求内存', '限制CPU', '限制内存', 'JAVA JVM']
      const filterVal = ['name', 'replicas', 'resources.requests.cpu', 'resources.requests.memory', 'resources.limits.cpu', 'resources.limits.memory', 'java_opts']
      const list = this.tableData
      const data = this.formatJson(filterVal, list)
      import('@/vendor/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: tHeader, // 表头 必填
          data, // 具体数据 必填
          filename: 'deployment', // 非必填
          autoWidth: true, // 非必填
          bookType: 'xlsx' // 非必填
        })
      })
      this.downloadLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        // return v[j]
        return this.getDescendantProp(v, j)
      }))
    },
    getDescendantProp(obj, desc) {
      var arr = desc.split('.')
      while (arr.length) {
        if (obj !== null) {
          obj = obj[arr.shift()]
        } else {
          break
        }
      }
      return obj
    }
  }
}
</script>
